Reactstrap — Button Dropdowns

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add button dropdowns with Reactstrap.

Button Dropdown

We can add a button dropdown with the ButtonDropdown component.

For example, we can write:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [dropdownOpen, setOpen] = React.useState(false);

  const toggle = () => setOpen(!dropdownOpen);

  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>Button Dropdown</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>item 1</DropdownItem>
        <DropdownItem disabled>item 2</DropdownItem>
        <DropdownItem>item 3</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>item 4</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

to add the button dropdown.

We add the ButtonDropdown component with the isOpen prop controlling when it’s open.

toggle has the function to toggle the dropdown on or off.

DropdownToggle has the dropdown toggle button.

DropdownMenu has the dropdown menu.

DropdownItem has the dropdown item.

header makes an item styled as the header.

disabled makes it disabled.

divider adds a divider.

caret adds the down arrow to the toggle button.

We can change the color prop to change style of the button.

For example, we can write:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [dropdownOpen, setOpen] = React.useState(false);

  const toggle = () => setOpen(!dropdownOpen);

  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret color="primary">
        Button Dropdown
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>item 1</DropdownItem>
        <DropdownItem disabled>item 2</DropdownItem>
        <DropdownItem>item 3</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>item 4</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

to add the color prop and set it to 'primary' .

This will make the dropdown toggle button blue.

Split Button Dropdowns

We can add a split toggle button for the dropdown toggle.

We can do that by adding a Button and DropdownToggle buttons.

For example, we write:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [dropdownOpen, setOpen] = React.useState(false);

  const toggle = () => setOpen(!dropdownOpen);

  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <Button id="caret" color="primary">
        button
      </Button>
      <DropdownToggle caret color="primary" />
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem disabled>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Another Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

We add the ButtonDropdown component with the Button inside.

Also, we have the DropdownToggle with the caret to show the down arrow.

Now we can only click on the DropdownToggle to click the dropdown.

Sizing

The size of the dropdown toggle button can change.

To change it, we use the size prop.

For instance, we can write:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [dropdownOpen, setOpen] = React.useState(false);

  const toggle = () => setOpen(!dropdownOpen);

  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret size="lg">
        Large Button
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem> Action</DropdownItem>
        <DropdownItem> Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

We gave the size prop on the DropdownToggle set to lg to make it large.

Also, we can set the toggle size to sm to make it small:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [dropdownOpen, setOpen] = React.useState(false);

  const toggle = () => setOpen(!dropdownOpen);

  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret size="sm">
        Small Button
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem> Action</DropdownItem>
        <DropdownItem> Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

Uncontrolled Dropdown

A button dropdown can be uncontrolled.

We can import the UncontrolledButtonDropdown to add one:

import React from "react";
import {
  UncontrolledButtonDropdown,
  DropdownMenu,
  DropdownItem,
  DropdownToggle
} from "reactstrap";

import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <UncontrolledButtonDropdown>
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Action</DropdownItem>
        <DropdownItem disabled>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </UncontrolledButtonDropdown>
  );
}

We use the UncontroleldButtonDropdown without any props.

It’ll toggle the dropdown on and off without setting any props.

If we don’t need to manipulate the dropdown programmatically then we can use this.

Drop Direction Variations

The menu can be displayed in any direction.

It can show above the button, or to the right or left, in addition to being below the button.

For instance, we can write:

import React from "react";
import {
  ButtonDropdown,
  DropdownMenu,
  DropdownItem,
  DropdownToggle
} from "reactstrap";

import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpenLeft, setOpenLeft] = React.useState(false);
  const [isOpenRight, setOpenRight] = React.useState(false);
  const [isOpenUp, setOpenUp] = React.useState(false);

const toggleLeft = () => setOpenLeft(!isOpenLeft);
  const toggleRight = () => setOpenRight(!isOpenRight);
  const toggleUp = () => setOpenUp(!isOpenUp);

  return (
    <>
      <ButtonDropdown direction="up" isOpen={isOpenUp} toggle={toggleUp}>
        <DropdownToggle caret>Dropup</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
      </ButtonDropdown>

      <ButtonDropdown direction="left" isOpen={isOpenLeft} toggle={toggleLeft}>
        <DropdownToggle caret>Dropleft</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
      </ButtonDropdown>

      <ButtonDropdown
        direction="right"
        isOpen={isOpenRight}
        toggle={toggleRight}
      >
        <DropdownToggle caret>Dropright</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
      </ButtonDropdown>
    </>
  );
}

to add those varieties.

We added the direction prop so that we change the menu orientation.

Conclusion

Button dropdowns is a component that comes with Reactstrap.

We can change the orientation and color of them.